<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
	<!--script type="text/javascript" src="../js/datagrid-detailview.js"></script-->
	<style type="text/css">
		.logs-detail{
		  width: 1010px;
		  margin: 0 auto;
		  overflow: auto;
		}
		.logs-detail div{
		  width:335px;
		  float:left;
		}
		.logs-detail ul {
		  list-style-type: none;
		  padding:0px;
		  padding:0px;
		  margin:5px 0px;
		}
		.logs-detail ul li{
			line-height: 24px;
			border: 1px dotted #ccc;
			font-size: 12px;
			margin:0px 10px 5px 0px;//top right bottom left
		}
		
		#opt a,
		#opt a:hover {
			margin:0px 1px;
			color: #66f;
			width:25px;
			//border:1px solid #ccc;
			text-decoration:none;
			border-style:none;
		}
		#opt a:hover{
			color: #f00;
		}
	</style>
	<script type="text/javascript">
	   function query(){
		   startTime=$("#startTime").datetimebox('getValue');
		   endTime=$("#endTime").datetimebox('getValue');
		   var begin = new Date(startTime.replace(/-/g, "/"));
		   var end = new Date(endTime.replace(/-/g, "/"));
		   if(begin>end){
				$.messager.alert("消息", "开始时间不能晚于结束时间！");return false;
		   }
		   $('#mydatagrid').datagrid('load',{
			   userName:$("#userName").val(),
			   realName:$("#realName").val(),
			   email:$("#email").val(),
			   startTime:$("#startTime").datetimebox('getValue'),
			   endTime:$("#endTime").datetimebox('getValue')
		   });
	   }
	   
	   function editor(value){
			alert(value);
		}
	   
	   function headline(index){
			alert(index);
		}
	   
	   function del(index){
			$.messager.confirm('消息','您确定要删除吗?',function(r) {
				if (r) {
					$.ajax({
						url:'<%=basePath%>/user/delete/'+index+'.action',
						type:'get',
						timeout:5000,
						success:function(data) {
							$.messager.alert('消息',data);
							$('#mydatagrid').datagrid('reload');
						}
					});
				} 
			});
		}
	   
	   function isSysUser(value,row,index){
		    if(value=='0'){
			    return '<span style="color:#66f">普通管理员</span>';
			}
		    if(value="1"){
		    	return '<span style="color:#66f">系统管理员</span>';
		    }
		    if(value="2"){
		    	return '<span style="color:#66f">超级管理员</span>';
		    }
		    else{
				return '<span style="color:#f00">未知用户</span>';
			}
		}
	   
	   function optdisplay(value,row,index){
		    return '<span id="opt"><a href="javascript:void(0); onclick=editor(\''+row.userName+'\')">添加</a>|'+
		    	   '<a href="javascript:void(0); onclick=headline(\''+row.userName+'\')">修改</a>|'+
		    	   '<a href="javascript:void(0); onclick=del(\''+row.userName+'\')">删除</a></span>';
	   }
	   $(function(){
			var pager = $('#mydatagrid').datagrid().datagrid('getPager');	// get the pager of datagrid
			pager.pagination({
				buttons:[{
					text:'新增',
					iconCls:'icon-add',
					handler:function(){
						window.location.href="<%=basePath%>/user/preadd.action";
					}
				}]
			});			
		})
		function formatColumn(colName,value,row,index) {
		    return eval("row."+colName);
		}
	</script>
</head>
<body>
    <div id="main-frame">
		<div id="search-content" style="float:left;margin-bottom:10px;">
		<div id="serar-panel" class="easyui-panel" style="width:1060px;height:auto;padding:3px;" 
				 title="查询"  data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table style="font-size:12px">
					<tr>
						<td>username</td>
						<td><input id="userName" class="easyui-validatebox" 
							style="width:120px">
						</td>
						<td>email</td>
						<td><input id="email" class="easyui-validatebox" 
							style="width:120px">
						</td>
						<td>realName</td>
						<td><input id="realName" class="easyui-validatebox"
							style="width:110px">
						</td>
						<td align="right">开始时间</td>
						<td><input class="easyui-datetimebox" id="startTime"
							data-options="required:true,showSeconds:true"
							value="3/4/2010 00:00:00" style="width:150px;margin-right:10px;">
						</td>
						<td align="right">结束时间</td>
						<td>
							<input class="easyui-datetimebox" id="endTime"
							data-options="required:false,showSeconds:false" 
							value="3/4/2010 23:59:59"
							style="width:150px;margin-right:10px;">
						</td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float:left;">
			<table id="mydatagrid" class="easyui-datagrid" title="Monitor-logs" style="width:1060px;height:480px"
	            data-options="singleSelect:true,	            
	            url:'<%=basePath%>/user/queryList.action',
	            collapsible:true,
	            rownumbers:true,
	            fitColumns:true,
	            sortName:'creatTime',
	            sortOrder:'desc',
	            noheader:true, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            idField:'userName'">
		        <thead>
		            <tr>
		                <th data-options="field:'userName',width:100,sortable:true">用户名</th>
		                <th data-options="field:'email',width:120,sortable:true">Email</th>
		                <th data-options="field:'realName',width:100,sortable:true">真实姓名</th>
		                <th data-options="field:'creatTime',width:110,sortable:true">创建时间</th>
		                <th data-options="field:'lastLoginTime',width:100,sortable:true">最后登录时间</th>
		                <th data-options="field:'loginNum',width:50,sortable:true">登录次数</th>
		                <th data-options="field:'userType',width:60,sortable:true" formatter="(function(v,r,i){return formatColumn('userType.typeName',v,r,i);})">用户类型</th>
		                <!--th id="publicState" data-options="field:'usertypeId',width:60,align:'center',sortable:true" formatter="isSysUser">用户类型</th-->
		                <th data-options="field:'creatUserName',width:60,sortable:true">授权用户</th>
		                <th data-options="halign:'center',field:'opt',width:90" formatter="optdisplay">操作</th>
		            </tr>
		        </thead>
		    </table>
	    </div>
	</div>
</body>
</html>